<template>
  <a-sub-menu :key="subMenu.path">
    <template #title>
      <span>
        <svg-icon v-if="subMenu.meta.icon" :iconClass="subMenu.meta.icon" :className="subMenu.meta.icon" />
        <span>{{subMenu.meta.title}}</span>
      </span>
    </template>
    <template v-for="item in subMenu.children">
        <a-menu-item v-if="!item.children || item.children.length == 1" :key="item.path">
          <router-link :to="item.path">
            <svg-icon v-if="item.meta.icon" :iconClass="item.meta.icon" :className="item.meta.icon" />
            <span>{{ item.meta.title }}</span>
          </router-link>
        </a-menu-item>
        <SubMenu v-else :key="item.path" :subMenu="item" />
    </template>
  </a-sub-menu>
</template>
<script lang="ts">
import { Vue } from "vue-class-component";
import { RouteRecordRaw } from "vue-router";
import { Prop } from "vue-property-decorator";
export default class SubMenu extends Vue {
  @Prop()
  public subMenu?: RouteRecordRaw;
}
</script>